3. Add queries

You can now start to add queries to your extended loaders.

The useQueries argument of createLoader is a hook, which means that the rules of hooks apply. This gives you the super-power of utilizing other hooks inside of your loader.

/src/loaders/userRouteLoader.tsx

import { baseLoader } from "./baseLoader";
// ...

export const userRouteLoader = baseLoader.extend({
  useQueries: () => {
    const { userId } = useParams();
    const user = useGetUserQuery(userId);
    const posts = useGetPostsByUser(userId);

    return {
      queries: {
        user,
        posts,
      },
    };
  },
});

You can add as many queries as you'd like to Response.queries, and they will all aggregate to a common loading state.